<template>
  <div class="background" :style="'min-height: ' + this.$store.state.middleHeight + 'px'">
    <div class="title">
      <Icon type="md-person"/>
      个人中心
    </div>
    <div style="width: 901px; margin: 90px auto 0;display: flex; min-height: 450px">
      <div class="lr">
        <div class="icon2">
          <Icon type="ios-book" size="65"/>
        </div>
        <div class="temp0">
          <router-link to="/personal" class="color1">个人信息</router-link>
        </div>
        <div class="temp">
          <router-link to="/personal" class="color1">账号信息</router-link>
        </div>
        <div class="temp">
          <router-link to="/personal" class="color1">账户信息</router-link>
        </div>
        <div class="temp">
          <router-link to="/personal" class="color0">查看详情 ></router-link>
        </div>
      </div>

      <div style="width: 1px; height: 100%; background-color: rgba(235, 122, 103, 1);"></div>
      <div class="lr">
        <div class="icon2">
          <Icon type="ios-time-outline" size="65"/>
        </div>
        <div class="temp0">
          <router-link to="/my_music" class="color1">我的音乐</router-link>
        </div>
        <div class="temp">
          <router-link to="/my_music" class="color1">上传音乐</router-link>
        </div>
        <div class="temp">
          <router-link to="/my_music" class="color1">上传的音乐</router-link>
        </div>
        <div class="temp">
          <router-link to="/my_music" class="color1">购买的音乐</router-link>
        </div>
        <div class="temp">
          <router-link to="/my_music" class="color0">查看详情 ></router-link>
        </div>
      </div>

      <div style="width: 1px; height: 100%; background-color: rgba(235, 122, 103, 1);"></div>
      <div class="lr">
        <div class="icon2">
          <Icon type="ios-cart-outline" size="65"/>
        </div>
        <div class="temp0">
          <router-link to="/tasks" class="color1">购物车</router-link>
        </div>
        <div class="temp">签到</div>
        <div class="temp">
          <router-link to="/tasks" class="color1">上传音乐</router-link>
        </div>
        <div class="temp">
          <router-link to="/tasks" class="color1">购买音乐</router-link>
        </div>
        <div class="temp">
          <router-link to="/tasks" class="color1">分享音乐</router-link>
        </div>
        <div class="temp">
          <router-link to="/tasks" class="color0">查看详情 ></router-link>
        </div>
      </div>

      <div style="width: 1px; height: 100%; background-color: rgba(235, 122, 103, 1);"></div>
      <div class="lr">
        <div class="icon2">
          <Icon type="ios-time-outline" size="65"/>
        </div>
        <div class="temp0">
          <router-link to="/tasks" class="color1">我的订单</router-link>
        </div>
        <div class="temp">签到</div>
        <div class="temp">
          <router-link to="/tasks" class="color1">上传音乐</router-link>
        </div>
        <div class="temp">
          <router-link to="/tasks" class="color1">购买音乐</router-link>
        </div>
        <div class="temp">
          <router-link to="/tasks" class="color1">分享音乐</router-link>
        </div>
        <div class="temp">
          <router-link to="/tasks" class="color0">执行任务 ></router-link>
        </div>
      </div>
      <div style="width: 1px; height: 100%; background-color: rgba(235, 122, 103, 1);"></div>
      <div class="lr">
        <div class="icon2">
          <Icon type="ios-time-outline" size="65"/>
        </div>
        <div class="temp0">
          <router-link to="/tasks" class="color1">每日任务</router-link>
        </div>
        <div class="temp">签到</div>
        <div class="temp">
          <router-link to="/tasks" class="color1">上传音乐</router-link>
        </div>
        <div class="temp">
          <router-link to="/tasks" class="color1">购买音乐</router-link>
        </div>
        <div class="temp">
          <router-link to="/tasks" class="color1">分享音乐</router-link>
        </div>
        <div class="temp">
          <router-link to="/tasks" class="color0">执行任务 ></router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PersonalCenter'
}
</script>

<style scoped>
.lr {
  width: 450px;
}

.icon2 {
  color: rgba(235, 122, 103, 1);
  width: 70px;
  height: 70px;
  line-height: 70px;
  margin: 0 auto;
  margin-top: 10px;
}

.temp0 {
  color: rgba(41, 64, 87, 1);
  font-size: 32px;
  text-align: center;
  margin: 35px auto 20px;
}

.temp {
  color: rgba(16, 16, 16, 1);
  font-size: 16px;
  text-align: center;
  margin-bottom: 20px;
}
</style>
